<template>
	<view style="height: 100vh;">
		<view>
			<camera @error="error"></camera>
		</view>
		<view class="action-area " style="display: flex; align-items: center;">
			<view class="row-around full-width" >
				<view style="width: 150rpx;">
					<view class="column-center">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/photoIcon2.png" style="width: 50rpx; height: 50rpx; color: white;" @tap="chooseImg"></image>
						<view class="muted xs padding-top-xs">相册</view>
					</view>
				</view>
				<view class="photo-action-wrap round shadow-blur" @click="takePhoto">
					<view class="photo-action bg-gradual-green round">
					</view>
				</view>
				<view class="muted row-center" style="width: 150rpx; height: 50rpx; border-radius: 25rpx; border: 1rpx solid white">拍照指南</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				photo: '',
				type: '',
			};
		},
		onLoad(options) {
			this.type = options.type
		},
		methods: {
			takePhoto() {
				const ctx = uni.createCameraContext()
				ctx.takePhoto({
					success: (res) => {
						console.log(res.tempImagePath)
						this.photo = res.tempImagePath
						this.confirmPhoto()
					}
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.photo = res.tempFilePaths[0]
						this.confirmPhoto()
					}
				})
			},
			 confirmPhoto() {
				let item = {photoPath: this.photo, type: this.type}
				uni.navigateTo({
					url: '/pages_subpackage/chooseImg/chooseImg?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			error(e) {
				console.log(e.detail)
			},
		},
		onHide() {
			this.photo = ''
		}
	}
</script>

<style lang="scss">
	page {
		margin: 0;
		padding: 0;
	}
	camera,
	{
		height: 80vh;
	}
	.action-area {
		height: 20vh;
		background-color: black;
	}

	.photo-action-wrap {
		padding: 1.5vh;
		background: rgba($-color-white, 0.2);

		.photo-action {
			width: 8vh;
			height: 8vh;
		}
	}

	.finish-action {
		width: 8vh;
		height: 8vh;
	}

	.shadow-blur {
		position: relative;
	}

	.shadow-blur::before {
		content: "";
		display: block;
		background: inherit;
		filter: blur(10upx);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 10upx;
		left: 10upx;
		z-index: -1;
		opacity: 0.4;
		transform-origin: 0 0;
		border-radius: inherit;
		transform: scale(1, 1);
	}

	.bg-gradual-green {
		background-image: linear-gradient(45deg, #ffffff, #F6F6F6);
		color: #ffffff;
	}

	.round {
		border-radius: 5000upx;
	}

	.full-width {
		width: 100%;
	}

	.bg-red {
		background-color: #e54d42;
		color: #ffffff;
	}
</style>



